<template>
 <div class="menu-container">
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        text-color="#1a2847"
        :collapse="isCollapsed"
        :width="isCollapsed ? '300px' : '60px' "
    >
      <el-button @click="toggleCollapse"
                 class="custom-button"
                 color="#a0c3ef"
                 :class="{ 'collapsed' : isCollapsed}"
                 text

      >
        折叠</el-button>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><Notification /></el-icon>
          <span style="font-size: 20px">参考医生</span>
        </template>
        <div style="background-image: linear-gradient(#d4e5ef,white)">
          <el-menu-item index="1-1" @click="ByArea">按地区查找</el-menu-item>
          <el-menu-item index="1-2" @click="ByDepartment">按科室查找</el-menu-item>
        </div>
      </el-sub-menu>

      <el-sub-menu index="2">
        <template #title>
          <el-icon><Document /></el-icon>
          <span style="font-size: 20px">医院查询</span>
        </template>
        <div style="background-image: linear-gradient(#d4e5ef,white)">
          <el-menu-item index="2-1" @click="ClassAHospital">三甲医院</el-menu-item>
          <el-menu-item index="2-2" @click="CMHospital">中医院</el-menu-item>
          <el-menu-item index="2-3" @click="ByTalent">按强项方面查找</el-menu-item>
          <el-menu-item index="2-4" @click="ByAreaH">按地区查找</el-menu-item>
        </div>
      </el-sub-menu>
      <el-menu-item index="3" @click="ToUserCenter">
        <el-icon><User /></el-icon>
        <template #title>
          <span style="font-size: 20px">用户中心</span>
        </template>
      </el-menu-item>
      <el-menu-item index="4" @click="AboutUs">
        <el-icon><Position /></el-icon>
        <template #title>
          <span style="font-size: 20px">关于我们</span>
        </template>
      </el-menu-item>

    </el-menu>


  </div>
</template>

<script>
import {Document,Notification,Position,User} from "@element-plus/icons-vue";

export default {
  components:{
    Document,
    Notification,
    Position,
    User,
  },
  name: "the-sider",
  data() {
    return {
      isCollapsed: false
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
    ToUserCenter(){
      this.$router.push('/User')
    },
    ByArea(){
      this.$router.push('/byarea')
    },
    ByDepartment(){
      this.$router.push('/bydepartment')
    },
    ClassAHospital(){
      this.$router.push('/classahospital')
    },
    CMHospital(){
      this.$router.push('/cmhospital')
    },
    ByTalent(){
      this.$router.push('/bytalent')
    },
    AboutUs(){
      this.$router.push('/aboutus')
    },
    ByAreaH(){
      this.$router.push('/byareah')
    },
  }
}
</script>

<style scoped>
.el-menu{
  height: 800px;
  /*width: 300px;*/
  background-color:#a0c3ef
}
.menu-container {
  position: relative;
  /*display: flex;*/
}

.custom-button {
  position: relative;
  transition: right 0.3s ease;
}

.collapsed .custom-button {
  right: 0;
}

</style>